﻿<%@ Page Title="" Language="C#" MasterPageFile="~/App_MasterPages/Aquarius.Master" AutoEventWireup="true" CodeBehind="TrackingService.aspx.cs" Inherits="PepsiCo.UI.TrackingService" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CssContent" runat="server">
        <style type="text/css">
        .sv{font-weight:bold; font-size: 18px; margin: 12px;}
        .sv span{display:inline-block; width:125px;}
        .sv label{display: inline-block; margin-left: 5px;}
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
                $("#datetime").html(FormatDateTime(new Date()));
            }, 1000);

            setInterval(function () {
                $.ajax({
                    type: "POST",
                    url: "TrackingService.aspx/GetService",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $("#servicename").html(data.d.ServiceName);
                        $("#servicestatus").html(data.d.ServiceStatus);
                    }
                });
            }, 5000);
        });

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div style="width: 450px; border: 1px solid #C3C3C3; margin: 120px auto;
        background: #FFF; padding: 5px;">
        <p class="sv"><span>Date time</span>:<label id="datetime"></label></p>
        <p class="sv"><span>Service Name</span>:<label id="servicename"></label></p>
        <p class="sv"><span>Status</span>:<label id="servicestatus"></label></p>
    </div>
</asp:Content>
